<template>
    <div class="nav">
        <div class="center">
            <h2 class="title">商城后台系统</h2>
            <ul>
                <li>
                    <router-link exact to="/">
                        <i class="el-icon-search"></i>
                        查询商品
                    </router-link>
                </li>
                <li>
                    <router-link to="/params">
                        <i class="el-icon-copy-document"></i>
                        规格参数
                    </router-link>
                </li>
                <li>
                    <router-link to="content">
                        <i class="el-icon-menu"></i>
                        内容分类管理
                    </router-link>
                </li>
            </ul>
            <div>
                <span>iwen</span>
                <el-button type="primary" @click="clickme" class="btn">登出</el-button>
            </div>
        </div>

    </div>

</template>

<script>
    import { mapMutations  } from 'vuex';
    export default {
        name: "Nav",
        methods:{
            ...mapMutations(['removeTokin']),
            clickme(){
                this.removeTokin();
                localStorage.removeItem('tokin');
                this.$router.replace('/login');
            }
        }
    }
</script>

<style scoped>
    .nav{
        height: 60px;
        background-color: #29323B;
        color: #fff;
        line-height: 60px;

    }
    .center{
        width: 1200px;
        height: 60px;
        margin: 0 auto;
    }
    .title{
        float: left;
        line-height: 60px;
        margin-right: 80px;
    }
    .nav a{
        color: #fff;
    }
    .center ul,.center li{
        float: left;

    }
    .center li{
        line-height: 60px;
        font-size: 20px;
        padding: 0 40px;
    }
    .btn{
        margin-left: 10px;
    }
    .nav  .active{
        color: green;
    }

</style>